<template>
    <el-dialog width="500px" title="录入商品" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="商品编号" prop="goods_no">
        <el-input v-model="form.goods_no" placeholder="请输入商品编号" clearable />
      </el-form-item>
      <el-form-item label="商品名称" prop="goods_name">
        <el-input v-model="form.goods_name" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="商品成新" prop="is_new">
        <el-radio-group v-model="form.is_new" size="small">
          <el-radio-button v-for="item in newType" :key="item.id" :value="item.id" :label="item.id">{{ item.name }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品类目" prop="category">
        <el-input v-model="form.category" placeholder="请输入类目" clearable />
      </el-form-item>
      <el-form-item label="商品品牌" prop="brand">
        <el-input v-model="form.brand" placeholder="请输入品牌" clearable />
      </el-form-item>
      <el-form-item label="商品颜色" prop="color">
        <el-input v-model="form.color" placeholder="请输入颜色" clearable />
      </el-form-item>
      <el-form-item label="商品内存" prop="memory">
        <el-input v-model="form.memory" placeholder="请输入内存" clearable />
      </el-form-item>
      <el-form-item label="运行内存" prop="run_memory">
        <el-input v-model="form.run_memory" placeholder="请输入运行内存" clearable />
      </el-form-item>
      <el-form-item label="官网价" prop="website_price">
        <el-input v-model="form.website_price" placeholder="请输入官网价" clearable />
      </el-form-item>
      <el-form-item label="报价金额" prop="price">
        <el-input v-model="form.price" placeholder="请输入报价金额" clearable />
      </el-form-item>
      <el-form-item label="报价金额1" prop="price1">
        <el-input v-model="form.price1" placeholder="请输入报价金额1" clearable />
      </el-form-item>
      <el-form-item label="是否监管" prop="is_supervise">
        <el-radio-group v-model="form.is_supervise" size="small">
          <el-radio-button label=1>{{ '是' }}</el-radio-button>
          <el-radio-button label=2>{{ '否' }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否含票" prop="is_invoice">
        <el-radio-group v-model="form.is_invoice" size="small">
          <el-radio-button label=1>{{ '是' }}</el-radio-button>
          <el-radio-button label=2>{{ '否' }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否支持远程" prop="is_remote">
        <el-radio-group v-model="form.is_remote" size="small">
          <el-radio-button label=1>{{ '是' }}</el-radio-button>
          <el-radio-button label=2>{{ '否' }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
  
<script>
import { insertProcure } from '@/api/audit'
import { getRegion } from '@/api/order'
export default {
  data() {
    return {
      dialogVisible: false,
      form:{
        goods_no:'',
        is_new:'',
        goods_name:'',
        is_remote:'',
        is_invoice:'',
        is_supervise:'',
        color:'',
        category:'',
        brand:'',
        memory:'',
        run_memory:'',
        website_price:'',
        price:'',
        price1:'',
      },
      areaList:[],
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      rules:{
        goods_no:[{ required: true, message: '请输入商品编号', trigger: 'blur' },],
        is_new:[{ required: true, message: '请选择成新度', trigger: 'blur' },],
        goods_name:[{ required: true, message: '请输入商品名称', trigger: 'blur' },],
        is_remote:[{ required: true, message: '请选择是否支持远程', trigger: 'blur' },],
        is_invoice:[{ required: true, message: '请选择是否含票', trigger: 'blur' },],
        color:[{ required: true, message: '请输入颜色', trigger: 'blur' },],
        category:[{ required: true, message: '请输入分类', trigger: 'blur' },],
        memory:[{ required: true, message: '请输入内存', trigger: 'blur' },],
        website_price:[{ required: true, message: '请输入官网价', trigger: 'blur' },],
        price:[{ required: true, message: '请输入报价金额', trigger: 'blur' },],
        price1:[{ required: true, message: '请输入报价金额1', trigger: 'blur' },],
        brand:[{ required: true, message: '请输入品牌', trigger: 'blur' },],
        is_supervise:[{ required: true, message: '请选择是否监管机', trigger: 'blur' },],
      },
      newType:[{
        id:100,
        name:'全新'
      },{
        id:99,
        name:'99新'
      },{
        id:95,
        name:'95新'
      },{
        id:90,
        name:'90新'
      }]
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData()
      } else {
        this.form = {}
      }
    }
  },
  methods: {
    getData() {
      getRegion().then(res => {
        this.areaList = res ? res[0].sub : []
      })
    },
    submit(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let data=this.form
          insertProcure(data).then(res=>{
            this.dialogVisible=false
            this.$emit('getList', true)
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>
  
<style lang="scss" scoped>
.share_dialog {
  /deep/.el-dialog__header {
    display: none;
  }

  /deep/.el-dialog__body {
    padding-top: 30px;
  }
}

.goods_info {
  margin: 30px 0;
  padding: 10px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;

  p {
    line-height: 20px;
  }

  .info {
    margin-left: 20px;
  }
}

.item_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 25px 30px;
  background: #f5f5f5;
  border-radius: 3px;

  .title {
    color: #000000;
    font-weight: bold;
  }
}

.poster {
  background-color: #ffffff;

  .img_wrap {
    border-bottom: 1px solid #e6e6e6;
  }

  .info {
    padding: 5px 10px;
  }
}
</style>
  